<template>
    <view class="view-fiex">
		<!-- 头部内容 -->
		<product-top />
		<!-- 商品列表 -->
        <view class="flex-1 ovh">
            <mo-product-list 
			open-tag
			:tagKey="tagKey"
			:list="list" 
			@scrollEnd="scrollEnd">
                <template v-slot:header="{item}">
                    <view class="title">{{item.name}}</view>
                </template>
                <template v-slot="{item}">
					<product-item 
					v-for="(child, childIndex) in item.list" 
					:key="childIndex" 
					:item="child"
					:name="item.name"
					@onChange="onChange"
					></product-item>
                </template>
            </mo-product-list>
        </view>
		<!-- 底部按钮 -->
		<product-bottom :list="cartList">
			<template v-slot:header="{list}">
				<view class="tp-tips">折扣已减2000</view>
				<view class="tp-info">
					<view class="">商品</view>
					<view class="" @click="clearCart">清空购物车</view>
				</view>
			</template>
			<template v-slot:popItem="{item}">
				<product-item 
				v-for="(child, childIndex) in item.list" 
				:key="childIndex" 
				:item="child"
				:name="item.name"
				@onChange="onChange"
				></product-item>
			</template>
		</product-bottom>
    </view>
</template>

<script>
	import moProductList from "@/components/mo-product-list/mo-product-list.vue";
	import productTop from './component/product-top.vue'
	import productItem from './component/product-item.vue'
	import productBottom from './component/product-bottom.vue'
	import testJson from './test.json'
	export default {
		components: {
			moProductList,
			productTop,
			productItem,
			productBottom
		},
		data() {
			return {
				list: testJson,
				tagKey: 'tag'
			}
		},
		computed:{
			cartList(){
				const ls = JSON.parse(JSON.stringify(this.list))
				return ls.reduce((t,item)=>{
					const child = item.list.filter(el=>{
						return !!el.selected
					})
					if(child.length){ t.push({...item,list:child}) }
					return t
				},[])
			}
		},
		onLoad(){
			this.initData();
		},
		methods: {
			scrollEnd(e){
				console.log(e)
			},
			async onChange(item){
				await this.updateSelect(item)
				await this.updateTag()
			},
			async initData(){
				await this.updateTag()
				await uni.stopPullDownRefresh();
			},
			updateTag(){
				return new Promise((resole, reject) => {
					this.$nextTick(function(){
						this.list.forEach((el,i)=>{
							const tag = el.list.reduce((t,c)=>{
								t = c.selected ? t + c.selected : t
								return t
							},0)
							const obj = {...el,[this.tagKey]:tag}
							this.$set(this.list, i, obj)
						})
					})
					resole()
				})
			},
			updateSelect({name, item}){
				return new Promise((resole, reject) => {
					this.$nextTick(function(){
						this.list.forEach((el,index)=>{
							if(el.name == name){
								el.list.forEach((e,i)=>{
									if(e.name == item.name){
										const obj = {...e,...item}
										this.$set(el.list, i, obj)
									}
								})
								this.$set(this.list,index,{...el})
							}
						})
						resole()
					})
				})
			},
			async clearCart(){
				this.list.forEach((el,index)=>{
					el.list.forEach((e,i)=>{
						if(e.selected){
							const obj = {...e,selected: 0}
							this.$set(el.list, i, obj)
						}
					})
					this.$set(this.list,index,{...el})
				})
				await this.updateTag()
			},
		}
	}
</script>

<style lang="scss" scoped>
    @import './base.scss';
	page{
		background: #f8f8f8;
	}
	.view-fiex{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: calc(100vh - constant(safe-area-inset-bottom));
		height: calc(100vh - env(safe-area-inset-bottom));
		/* #ifndef MP-WEIXIN */
		height: calc(100vh - 44px - constant(safe-area-inset-bottom));
		height: calc(100vh - 44px - env(safe-area-inset-bottom));
		/*  #endif  */
	}
	.flex-1{ flex: 1;}
	.ovh{ overflow: hidden;}
	.title{ padding: 30rpx; }
	.innor{
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.tp-tips{
		text-align: center;
		background-color: #f9ede3;
		font-size: 24rpx;
		padding: 12rpx 0;
	}
	.tp-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding: 15rpx 30rpx;
		font-size: 28rpx;
		color: gray;
	}
</style>
